<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px
        }
        #yuan{
            width: 500px;
            height: 500px;
            border-radius: 50% ;
            border: 2px blue solid;
            position: relative;
        }
        #zhen{
            width: 3px;
            height: 250px;
            background-color: black;
            position: absolute;  
            left: 250px; 
            transform: rotate(0deg);
            transform-origin: center bottom;   
          }
    </style>
</head>
<body>

    <div id="yuan">
        <div id="zhen"></div>
    </div>

    <script>
        var secondzhen = document.getElementById("zhen");
        function fn(){
            var time = new Data()
            var second = time.getSeconds();
            var deg = 360/(60/second);
            secondzhen.style.transform = `rotate(${deg}deg)`;
        }
        fn();
        setInterval(function() {
            fn()
        }, 1000);



















        // var time2 = new Date("2021-11-22 8:30")
        // function fn(){
        //     var time1 = new Date()
        // var time11 = time1.getTime()/1000;
        // var time22 = time2.getTime()/1000;
        // var intime = parseInt(time22-time11);
        // var day = parseInt(intime/3600/24);
        // var hour = parseInt(intime/3600)%24;
        // var minute = parseInt(intime/60)%60;
        // var second = intime%60;
        // var str = `Death Time${day}天${hour}时${minute}分${second}秒`
        // document.body.innerHTML = str;
        // }
        
        // setInterval(function(){
        //     fn()
        // }, 1000);
    </script>
</body>
</html>